<template>
  <div class="home">
    <!-- 搜索框-添加 -->
    <div style="display: flex">
      <div>
        <div style="display: inline-flex;margin-right:8px">
          <el-input
            placeholder="搜索"
            v-model="input"
            clearable
            style="width: 300px;margin-right:8px"
          >
          </el-input>
          <el-button type="primary" @click="seach({ searchKey: input })"
            >查询</el-button
          >
          <el-button type="primary" @click="openAdd">新增</el-button>
        </div>
        <el-button type="primary" @click="out" style=""
          >导出</el-button>
        <form action="/api/exc/import" method="post" enctype="multipart/form-data">
        <el-upload
          class="upload-demo"
          ref="upload"
          name="excelFile"
          :auto-upload="false"
          style="display: inline-flex; margin-right: 8px;margin-left:600px"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            style="margin-right: 8px"
            @click="change"
            >上传文件</el-button
          >
          <el-button
            style="top: 100px"
            size="small"
            type="success"
            native-type="submit"
            :disabled="importdisable"
            @click="change"
            >导入</el-button
          >
        </el-upload>
        </form>
        
      </div>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%; text-align: center; margin-top: 10px"
      border
      lazy
    >
      <el-table-column prop="port" label="端口号" width="100">
      </el-table-column>
      <el-table-column prop="ip" label="服务器地址" width="150">
      </el-table-column>
      <el-table-column prop="content" label="描述" width="150">
      </el-table-column>
      <el-table-column prop="type" label="类型" width="150"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column prop="user" label="处理人"> </el-table-column>
      <el-table-column prop="solveCont" label="处理内容"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="openUpdate(scope.row)" :disabled="dis">发布任务</el-button>
          <el-button size="mini" @click="del(scope.row)" :disabled="dis">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="currentChangeHandle"
      @size-change="sizeChangeHandle"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align: right"
    >
    </el-pagination>

    <!-- 新增对话框 -->
    <el-dialog
      title="新增"
      :visible.sync="dialogFormVisible"
      style="text-align: center"
    >
      <el-form :model="form">
        <el-form-item label="IP" :label-width="formLabelWidth">
          <el-input v-model="form.ip" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="端口号" :label-width="formLabelWidth">
          <el-input v-model="form.port" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      title="请选择漏洞处理人"
      style="text-align: center"
      :visible.sync="dialogFormVisible1"
    >
      
     <el-form :model="form1">

<el-table
      :data="
        userLabelList
      "
      style="width: 50%; text-align: center;margin-left: 280px;"
      border
      lazy
    >
      <el-table-column prop="id" label="管理员id" width="228">
      </el-table-column>
      <el-table-column prop="name" label="管理员姓名" width="230">
      </el-table-column>
    </el-table>
<br>
        <el-form-item label="管理员id" :label-width="formLabelWidth">
          <el-input v-model="form1.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员姓名" :label-width="formLabelWidth">
          <el-input v-model="form1.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

    
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // form1: {
  //    name: "",
  //    userName: "",
  //   phone: ""
  // },
  created() {
    this.seach({});
    if(sessionStorage.getItem('sex')=="管理员"){
      this.dis=false;
      console.log(this.dis);
    }
  },
  // watch: {
  //   current: function () {
  //     this.seach({ pageNum: this.current });
  //   },
  // },
  methods: {
    update() {
      this.$axios.post("/api/bug/re2", {"id2":this.form1.id,
                                        "id":this.id,
                                        "name":this.form1.name,
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible1 = false;
        window.location.reload();
      });
    },

    openUpdate(row) {
      this.$axios
        .post("/api/bug/show2", {})
        .then((res) => {
          console.log(res);
          this.userLabelList = res.data.data;
          this.id=row.id;
        });
      // this.$axios
      //   .post("/api/bug/details", { userName: row.userName })
      //   .then((res) => {
      //     this.form1 = JSON.parse(JSON.stringify(row));
      //     //  this.form1 = JSON.parse(JSON.stringify(row));
      //     // console.log(res);
      //     // this.form1 = res.data.data;
      //     // console.log("下面是this.from1");
      //     // console.log(this.form1);
      //   });

      // console.log(row);
      this.dialogFormVisible1 = true;
    },

    openAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },

    add() {
      this.$axios.post("/api/bug/add", this.form).then((res) => {
        console.log(res);
        this.dialogFormVisible = false;
        window.location.reload();
      });
    },

    del(row) {
      this.$axios
        .post("/api/bug/del", { id: row.id })
        .then((res) => {
          console.log(res);
          window.location.reload();
        });
    },

    seach(params) {
      this.$axios.post("/api/bug/show", params).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    currentChangeHandle(e) {
      console.log("当前页码", e);
      this.currentPage = e;
    },
    sizeChangeHandle(e) {
      console.log("每页显示多少条数据", e);
      this.pageSize = e;
    },

    out(){
    if(confirm("确定要导出所有数据吗？")){
        //必须是传统请求
        window.location.href = "/api/exc/export";
    }
    },
    change(){
      if(this.importdisable){
        this.importdisable=false
      }else{
        setTimeout(function () {
                this.importdisable=true;
            },3000);
      }
    },
  },
  data() {
    return {
      importdisable:true,
      id:'',
      userLabelList:[],
      dis: true,
      total: 0,
      input: "",
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px",
      dialogFormVisible1: false,
      form1: {
        name: "",
        userName: "",
        phone: "",
      },
      formLabelWidth1: "120px",
    };
  },
};
</script>

<style>
.el-header {
  padding: 0 !important;
  margin: 0 !important;
}


.el-group-list.el-radio-group{
  display: flex;
  flex-direction: column;
  align-items:stretch;
}
 


</style>